<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 数组排序</title>
</head>
<body>
<h2>sort()排序对象数组</h2>
<p>点击按钮按车型对汽车进行排序：</p>

<button onclick="myFunction()">排序</button>

<p id="demo"></p>

<script>
  var cars = [
    {type:"BMW", year:2017},
    {type:"Audi", year:2019},
    {type:"porsche", year:2018}
  ];

  displayCars();

  function myFunction() {
    cars.sort(function(a, b){
      var x = a.type.toLowerCase();
      var y = b.type.toLowerCase();
      if (x < y) {return -1;}
      if (x > y) {return 1;}
      return 0;
    });
    displayCars();
  }

  function displayCars() {
    document.getElementById("demo").innerHTML =
            cars[0].type + " " + cars[0].year + "<br>" +
            cars[1].type + " " + cars[1].year + "<br>" +
            cars[2].type + " " + cars[2].year;
  }
</script>

</body>
</html>


<!--
Audi 2019
BMW 2017
porsche 2018
-->